import VideoSurveillance from "./VideoSurveillance";
import { ref } from "vue";
import titleBg from "./assets/21193.svg";
import ModelAgri from "./assets/蒙版组109.webp";
import MeteInfo from "./MeteInfo";
import SoilInfo from "./SoilInfo";
import "./index.scss";
import TemHumDetection from "./TemHumDetection";
import LightIntensityAnalysis from "./LightIntensityAnalysis";
import CarbonAnalysis from "./CarbonAnalysis";
import DeviceNum from "./DeviceNum";
import DeviceMonitor from "@/views/dashboard/agriculture/DeviceMonitor";

export default defineComponent({
	name: "Index",
	setup() {
		const time = ref("");
		const date = ref<Date>(new Date());
		onMounted(() => {
			setInterval(() => {
				date.value = new Date();
				time.value = date.value.getHours() + ":" + date.value.getMinutes() + ":" + date.value.getSeconds();
			}, 1000);
		});
		return () => (
			<div className="back-ground-img w-full h-full px-5 pb-5 box-border flex flex-col">
				<header className="flex flex-row justify-between h-fit relative">
					<div className={"logo h-fit m-auto flex flex-row absolute left-8 top-0 bottom-0"}>
						<div
							className={"rounded-[100%] "}
							style={{
								width: "24px",
								height: "24px",
								background: "linear-gradient(336.00deg, #ff9624 47.07%, #ffd110 100%)"
							}}
						></div>
						<div className={"text-white ml-2"}>晴</div>
					</div>
					<div className={"title h-fit w-full left-0 top-0 right-0 bottom-0 "}>
						<img className={"w-full h-full"} src={titleBg} alt={""} />
					</div>
					<div
						className={"time h-fit flex flex-row text-white m-auto justify-between items-center absolute right-6 top-0 bottom-0"}
					>
						<div className={"text-[20px] "}>{time.value}</div>
						<div className={"text-[14px] mx-3"}>
							{new Date().getFullYear() + "." + (new Date().getMonth() + 1) + "." + new Date().getDate()}
						</div>
					</div>
				</header>
				<div className="h-full w-full flex pb-3 ">
					<div className={"left w-1/4 h-full"}>
						<MeteInfo className={"h-1/3"} />
						<SoilInfo className={"h-1/3"} />
						<TemHumDetection className={"h-1/3"} />
					</div>
					<div className={"center w-1/2 flex flex-col h-full box-border "}>
						<div className={"w-full h-[12%] flex flex-row justify-center items-center"}>
							<DeviceNum></DeviceNum>
						</div>
						<div className={"w-full h-[60%]"}>
							<img src={ModelAgri} className={"w-full h-full object-contain"} alt={""} />
						</div>
						<div className={" w-full h-[28%] flex flex-row"}>
							<LightIntensityAnalysis className={"w-1/2 h-full"}></LightIntensityAnalysis>
							<CarbonAnalysis className={"w-1/2 h-full"}></CarbonAnalysis>
						</div>
					</div>
					<div className={"right w-1/4 h-full"}>
						<VideoSurveillance className={"w-full h-1/2"}></VideoSurveillance>
						<DeviceMonitor className={"w-full h-1/2"}></DeviceMonitor>
					</div>
				</div>
			</div>
		);
	}
});
